<template>
    <div id="tmpl">
<!--      <mt-swipe :auto="2000" >
        <mt-swipe-item v-for="item in list">
          <img :src="item.img_url">
        </mt-swipe-item>
      </mt-swipe>-->
      <slide :imgs="list"></slide>
      <div class="mui-content">
        <ul class="mui-table-view mui-grid-view mui-grid-9">
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <router-link to="/news/newslist">
            <span class="mui-icon mui-icon-home"></span>
            <div class="mui-media-body">新闻资讯</div>
            </router-link>
          </li>
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <router-link to="/photo/photolist">
            <span class="mui-icon mui-icon-email"></span>
            <div class="mui-media-body">图片分享</div>
            </router-link>
          </li>
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <router-link to="/goods/goodslist">
            <span class="mui-icon mui-icon-chatbubble"></span>
            <div class="mui-media-body">商品购买</div>
            </router-link>
          </li>
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <router-link to="/">
            <span class="mui-icon mui-icon-location"></span>
            <div class="mui-media-body">留言反馈</div>
            </router-link>
          </li>
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <router-link to="/">
            <span class="mui-icon mui-icon-search"></span>
            <div class="mui-media-body">视频专区</div>
            </router-link>
          </li>
          <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            <router-link to="/">
            <span class="mui-icon mui-icon-phone"></span>
            <div class="mui-media-body">联系我们</div>
            </router-link>
          </li>

        </ul>
      </div>

    </div>
</template>

<script>
  import slide from './subcom/slide.vue'
    export default{
      components:{
        slide,
      },
        data(){
            return{
                list:[]
            }
        },
      mounted(){
        this.getData()
      },
      methods:{
         getData(){
             this.$http.get('/api/home').then( res=> {
             this.list=res.data
             })
         }
      },
    }
</script>

<style scoped>
  .mint-swipe {
height: 250px;

  }
  .mint-swipe-item img{
    width: 100%;
  }
  .mui-table-view,.mui-grid-view,.mui-grid-9{
    background-color: #ffffff;
  }
  .mui-grid-view.mui-grid-9 .mui-table-view-cell{
    border: 0;
  }
  .mui-grid-view.mui-grid-9{
    border: 0;
  }
  .mui-icon-home:before{
   content:"";
    background-image: url(../../static/images/i1.png);
    width: 50px;
    height: 50px;
    background-repeat: round;
    display: inline-block;
  }
  .mui-icon-email:before{
    content:"";
    background-image: url(../../static/images/i2.png);
    width: 50px;
    height: 50px;
    background-repeat: round;
    display: inline-block;
  }
  .mui-icon-chatbubble:before{
    content:"";
    background-image: url(../../static/images/i3.png);
    width: 50px;
    height: 50px;
    background-repeat: round;
    display: inline-block;
  }
  .mui-icon-location:before{
    content:"";
    background-image: url(../../static/images/i4.png);
    width: 50px;
    height: 50px;
    background-repeat: round;
    display: inline-block;
  }
  .mui-icon-search:before{
    content:"";
    background-image: url(../../static/images/5.png);
    width: 50px;
    height: 50px;
    background-repeat: round;
    display: inline-block;
  }
  .mui-icon-phone:before{
    content:"";
    background-image: url(../../static/images/6.jpg);
    width: 50px;
    height: 50px;
    background-repeat: round;
    display: inline-block;
  }


 </style>
